<template>
  <div id="seteventdetails">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>模块标题</legend>
      <div class="layui-field-box">
        <el-input v-model="moddata[index].config.title" placeholder="请输入模块标题"></el-input>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>是否显示</legend>
      <div class="layui-field-box">
        <el-switch v-model="moddata[index].visible" on-color="#13ce66" off-color="#ff4949">
        </el-switch>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title" v-if="pageconfig[pageconfig.theme].layout == 'two'">
      <legend>模块图标</legend>
      <div class="layui-field-box">
        <div class="icon-box">
          <i :class="['iconfont','iconset',moddata[index].config.icon?moddata[index].config.icon:moddata[index].defaultIcon]"></i>
        </div>
        <el-button @click="choseIcon(true)" type="primary">选择图标</el-button>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title" v-if="pageconfig[pageconfig.theme].layout == 'two'">
      <legend>图标颜色</legend>
      <div class="layui-field-box">
        <el-color-picker v-model="color1" @change="changefc"></el-color-picker>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title" v-if="pageconfig[pageconfig.theme].layout == 'two'">
      <legend>背景颜色</legend>
      <div class="layui-field-box">
        <el-color-picker v-model="color2" @change="changefc"></el-color-picker>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>说明信息</legend>
      <div class="layui-field-box">
        <el-button @click="showuEditer(true)">网页编辑器</el-button>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>字段内容</legend>
      <div class="layui-field-box">
        <el-button @click="showfieldBox(true)">选择字段</el-button>
      </div>
    </fieldset>
    <el-button @click="save" type="primary">保存</el-button>
    <el-button @click="cancel">取消</el-button>
    <transition name="fade">
      <div class="callsponsor" v-show="choseicon">
        <transition name="move">
          <div class="box" v-show="choseicon">
            <p>图标库</p>
            <i class="el-message-box__close el-icon-close close" @click="choseIcon(false)"></i>
            <div class="content">
              <div :class="['icon-box',nowIcon == iconitem ? 'active':'']" v-for="iconitem in iconlist" @click="clickicon(iconitem)">
                <i :class="['iconfont','iconset',iconitem]"></i>
              </div>
            </div>
            <div class="bottombox">
              <el-button @click="choseIcon(false)">取消</el-button>
              <el-button @click="confirm" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition>
    <transition name="fade">
      <div class="callsponsor" v-show="uEditer">
        <transition name="move">
          <div class="box2" v-show="uEditer">
            <p class="title">编辑器</p>
            <i class="el-message-box__close el-icon-close close" @click="showuEditer(false)"></i>
            <div class="content">
              <div class="" id="custom_edit"></div>
            </div>
            <div class="bottombox">
              <el-button @click="showuEditer(false)">取消</el-button>
              <el-button @click="submituE" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition>
    <transition name="fade">
      <div class="callsponsor" v-show="fieldBox">
        <transition name="move">
          <div class="box2" v-show="fieldBox">
            <p class="title">字段选择</p>
            <i class="el-message-box__close el-icon-close close" @click="showfieldBox(false)"></i>
            <div class="content">
              <div class="contentBox" id="custom_edit">
                <div class="leftTable">
                  <div class="draggableTitl">
                    <p>字段名称</p>
                    <!-- <p>字段类型</p> -->
                    <p>操作</p>
                  </div>
                  <draggable v-model="Alreadyadded" element="ul" :options="{handle:'.sortbtn'}">
                    <transition-group>
                      <li class="dragbox" v-for="(field,index) in Alreadyadded" v-bind:key="field.Id">
                        <div class="part">
                          {{field.Title}}
                        </div>
                        <!-- <div class="part">
                        </div> -->
                        <div class="part">
                          <el-button size="small" icon="d-caret" class="sortbtn">排序</el-button>
                          <el-button size="small" icon="delete" type="danger" v-on:click="delfield(index)">删除</el-button>
                        </div>
                      </li>
                    </transition-group>
                  </draggable>
                </div>
                <div class="rightTable">
                  <p class="text">现有字段:</p>
                  <div class="fieldbox">
                    <ul class="fieldList">
                      <li v-for="(field,index) in comExFields" v-bind:key="field.Id">
                        <span class="fieldr"><span class="number">{{(index+1)}}</span>{{field.Title}}</span>
                        <el-button type="primary" size="mini" class="addfield" v-if="!field.added" v-on:click="addfield(field)">添加</el-button>
                        <span class="added" v-if="field.added">已添加</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottombox">
              <el-button @click="showfieldBox(false)">取消</el-button>
              <el-button @click="submit" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    props: ["moddata", "index", "pageconfig", "topics"],
    data: function () {
      return {
        input: this.moddata[this.index].config.title,
        radio: this.moddata[this.index].config.titleshow ? "显示标题" : "不显示标题",
        color1: this.moddata[this.index].config.color,
        color2: this.moddata[this.index].config.backgroundColor,
        choseicon: false,
        nowIcon: this.moddata[this.index].config.icon,
        iconlist: [
          "icon-activity_fill",
          "icon-coordinates_fill",
          "icon-group_fill",
          "icon-people_fill",
          "icon-shijiandidianiconfontshiyongzhinan",
          "icon-icon-system-fi-ticket",
          "icon-xiangqing",
          "icon-addition_fill",
          "icon-barrage_fill",
          "icon-brush_fill",
          "icon-businesscard_fill",
          "icon-camera_fill",
          "icon-clock_fill",
          "icon-collection_fill",
          "icon-marketing_fill",
          "icon-financial_fill",
          "icon-computer_fill",
          "icon-customerservice_fill",
          "icon-dynamic_fill",
          "icon-feedback_fill",
          "icon-flag_fill",
          "icon-flashlight_fill",
          "icon-homepage_fill",
          "icon-integral_fill",
          "icon-interactive_fill",
          "icon-like_fill",
          "icon-live_fill",
          "icon-lock_fill",
          "icon-redpacket_fill",
          "icon-remind_fill",
          "icon-systemprompt_fill",
          "icon-task_fill",
          "icon-time_fill",
          "icon-unlock_fill",
          "icon-video_fill",
          "icon-warning_fill",
          "icon-workbench_fill",
          "icon-qianniu"
        ],
        con: this.moddata[this.index].config.content,
        fieldBox: false,
        uEditer:false,
        Alreadyadded: this.moddata[this.index].config.fields
      }
    },
    mounted() {
      this.myEditor = UE.getEditor('custom_edit');
    },
    beforeDestroy() {
      this.myEditor.destroy();
    },
    watch: {
      index() {
        this.color2 = this.moddata[this.index].config.backgroundColor
      }
    },
    computed: {
      comExFields: function () {
        var that = this;
        that.topics.forEach(function (exF) {
          exF.added = false;
          that.Alreadyadded.forEach(function (apF) {
            if (exF.Id == apF.Id) {
              exF.added = true;
            }
          })
        })
        return that.topics
      }
    },
    methods: {
      changetype: function () {
        if (this.radio == "显示标题") {
          this.moddata[this.index].config.titleshow = true;
        } else if (this.radio == "不显示标题") {
          this.moddata[this.index].config.titleshow = false;
        }
      },
      changefc: function () {
        this.moddata[this.index].config.backgroundColor = this.color2;
        this.moddata[this.index].config.color = this.color1;
      },
      cancel: function () {
        this.$emit('setdone', 2);
      },
      save: function () {
        this.$emit('setdone', 1);
      },
      choseIcon(bol) {
        if (bol) {
          this.nowIcon = this.moddata[this.index].config.icon;
        }
        this.choseicon = bol
      },
      clickicon(a) {
        this.nowIcon = a;
      },
      confirm() {
        this.moddata[this.index].config.icon = this.nowIcon;
        this.choseicon = false;
      },
      addfield(item) {
        this.Alreadyadded.push(item);
      },
      delfield(index) {
        this.Alreadyadded.splice(index, 1);
      },
      showfieldBox(bol) {
        this.fieldBox = bol;
      },
      submit() {
        this.moddata[this.index].config.fields = this.Alreadyadded;
        this.fieldBox = false;
      },
      showuEditer(bol) {
        if (bol) {
          this.myEditor.setContent(this.con);
        }
        this.uEditer = bol;
      },
      submituE() {
        var text = this.myEditor.getContent();
        this.con = text;
        this.moddata[this.index].config.content = text;
        this.uEditer = false;
      }
    },
    components: {
      draggable,
    }
  }
</script>

<style scoped lang="less">
  .icon-box {
    width: 34px;
    height: 34px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle; // box-sizing: border-box;
    .iconset {
      font-size: 34px;
      line-height: 34px;
      color: #666;
    }
  }

  .icon-box.active {
    border: 1px solid #20a0ff;
  }

  .callsponsor {
    background: rgba(0, 0, 0, .5);
    transition: width 0.5s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2003;
    .box {
      text-align: left;
      display: inline-block;
      vertical-align: middle;
      background-color: #fff;
      width: 550px;
      border-radius: 3px;
      font-size: 16px;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      background: #fff;
      position: relative;
      p {
        padding: 20px 20px 0;
      }
      .content {
        padding: 20px;
        .icon-box {
          margin: 5px;
          .iconset {
            transition: all .4s;
          }
          .iconset:hover {
            transform: translateY(-2%);
            box-shadow: 1px 4px 10px 2px #CCC;
            -webkit-box-shadow: 1px 4px 10px 2px #CCC;
            -moz-box-shadow: 1px 4px 10px 2px #CCC;
          }
        }
      }
      .bottombox {
        padding: 10px 20px 15px;
        text-align: right;
      }
    }
    .box2 {
      text-align: left;
      display: inline-block;
      vertical-align: middle;
      background-color: #fff;
      width: 800px;
      border-radius: 3px;
      font-size: 16px;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      background: #fff;
      position: relative;
      .title {
        padding: 20px 20px 0;
      }
      .content {
        padding: 20px;
        .icon-box {
          margin: 5px;
          .iconset {
            transition: all .4s;
          }
          .iconset:hover {
            transform: translateY(-2%);
            box-shadow: 1px 4px 10px 2px #CCC;
            -webkit-box-shadow: 1px 4px 10px 2px #CCC;
            -moz-box-shadow: 1px 4px 10px 2px #CCC;
          }
        }
      }
      .bottombox {
        padding: 10px 20px 15px;
        text-align: right;
      }
    }
    .close {
      position: absolute;
      top: 19px;
      right: 20px;
      font-size: 13px;
      color: #999;
    }
  }

  .callsponsor:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  .fade-enter-active,
  .fade-leave-active,
  .move-enter-active,
  .move-leave-active {
    transition: all .4s
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }

  .move-enter,
  .move-leave-to {
    transform: translateY(-20px);
  }

  .contentBox {
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    max-height: 500px;
    overflow: auto;
  }

  .leftTable {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 15px;
  }

  .rightTable {
    width: 230px;
  }

  .rightTable .text {
    font-size: 14px;
    line-height: 30px;
  }

  .fieldbox {
    min-height: 400px;
    border: 1px dashed #666;
  }

  .fieldList li {
    height: 40px;
    margin: 10px;
    line-height: 40px;
    padding-right: 20px;
    background: rgba(242, 242, 242, 1);
  }
  .number{
    width: 25px;
    color: #333;
    display: inline-block;
    text-align: center;
  }

  .fieldr {
    width: 100px;
    color: #666;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .addfield {
    float: right;
    margin-top: 6px;
  }

  .added {
    float: right;
    font-size: 12px;
    color: #666;
    padding-right: 5px;
  }

  .draggableTitl {
    background: #e3ebf8;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    background: #e5e8ee;
    height: 42px;
  }

  .draggableTitl p {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: left;
    line-height: 40px;
    padding-left: 5%;
  }

  .draggableTitl p:last-child {
    -webkit-box-flex: none;
    -moz-box-flex: none;
    -ms-flex: none;
    flex: none;
    text-align: left;
    line-height: 40px;
    padding-left: 5%;
    width: 150px;
  }

  .dragbox {
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    border-bottom: 1px solid #dedede;
  }

  .dragbox .part {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: left;
    line-height: 40px;
    padding-left: 5%;
  }

  .dragbox .part:last-child {
    -webkit-box-flex: none;
    -moz-box-flex: none;
    -ms-flex: none;
    flex: none;
    text-align: left;
    line-height: 40px;
    padding-left: 5%;
    width: 150px;
  }

  .sortable-chosen {
    border: 1px dashed #ff7c35
  }
</style>